<template>
  <div class="pageTab">
    <div v-for="(item,index) in tabs" :key="item.index" class="tab-item" :class="{'active': index === active}" @click="tabSwitch(item,index)">
      {{item.value}}
    </div>
    <div class="tab-swipe" :style="{'left': swipePos}"></div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      active: 0
    }
  },
  computed: {
    swipePos() {
      let pos = this.active * 160 + 55
      return pos * 100 / 1920 + 'vw'
    }
  },
  methods: {
    tabSwitch(item,index) {
      this.active = index
      //this.active = item.key
      this.$emit("activeIndex",item)
      this.$store.commit('setState', {
        name: 'currentResTab',
        value: item
      })
      
    }
  },
}
</script>

<style lang="stylus">
.pageTab {
  max-width: getPx(640);
  overflow-x: auto;
  height: getPx(60);
  position: relative;
  color: $txt-color;
  flexMiddle(center);
  .tab-item {
    width: getPx(160);
    cursor: pointer;
    font-size: getPx(20);
    text-align: center;
    letter-spacing: 2px;
    color: $primary;
    &.active {
      font-size: getPx(26);
      font-weight: bold;
    }  
  }
  .tab-swipe {
    width: getPx(50);
    height: getPx(6);
    background: $primary;
    border-radius: getPx(3);
    position: absolute;
    left: getPx(55);
    bottom: 0;
    transition: all $trans-time;
  }
}
</style>